<template>
  <el-dialog title="投诉操作" :visible.sync="visible" :append-to-body="true" :lock-scroll="false" width="50%"
    z-index="2007">
    <div>
      <div>
        <el-form :model="complainForm" :rules="complainrules" ref="complainForm" label-width="100px">
          <el-form-item label="投诉等级" prop="complaintLevel">
            <ComplaintLevelSelect v-model="complainForm.complaintLevel" style="width: 150px;margin-right:10px" filterable></ComplaintLevelSelect>
          </el-form-item>
          <el-form-item label="投诉渠道" prop="complaintChannel">
            <ComplaintChannelSelect v-model="complainForm.complaintChannel" @change="onComplaintChannelChange" style="width: 150px;margin-right:10px" filterable></ComplaintChannelSelect>
          </el-form-item>
          <el-form-item label="投诉内容" prop="complaintContent">
            <el-input type="textarea" v-model.trim="complainForm.complaintContent" placeholder="请输入投诉内容"
              :autosize="{ minRows: 3 }" maxlength="500" show-word-limit style="width: 350px"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.number="complainForm.phone" placeholder="请输入号码" style="width: 200px"></el-input>
          </el-form-item>

          <el-form-item label="商品副图:" prop="title">
            <div>
              <el-upload action="/api/xmbz-goods/file/upload" :data="{ tag: 'complaint' }" :on-exceed="handleExceed"
                list-type="picture-card" :on-success="handComplaintLeftSuccess" :limit="10"
                :file-list="singcomplaintForm.pics" :on-remove="beforeComplaintRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <span slot="footer">
      <el-button @click="complainResetForm('complainForm')">取消</el-button>
      <el-button type="primary" @click="complainSubmitForm('complainForm')">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getComplaintLevelList, // 投诉等级列表
  getComplaintChannelList, // 投诉渠道列表
  addWorkOrderComplaint, // 新增投诉
} from "@/api/pending";
import { prodComplaintTem } from '@/const'

export default {
  data() {
    return {
      visible: false, //投诉
      getComplaintLevelList: [], // 投诉等级列表
      getComplaintChannelList: [], // 投诉渠道列表
      complainForm: {
        // 投诉
        orderId: "", // 后台单号
        phone: "", // 投诉号码
        responsibleDepartment: "", // 投诉责任部门
        departmentErrorType: "", // 部门失误类型
        complaintLevel: "", // 投诉等级
        complaintChannel: "", // 投诉渠道
        complaintContent: "", // 投诉内容
      },
      complainrules: {
        // 投诉
        complaintLevel: [
          { required: true, message: "请选择投诉等级", trigger: "blur" },
        ],
        complaintChannel: [
          { required: true, message: "请选择投诉渠道", trigger: "change" },
        ],
        complaintContent: [
          { required: true, message: "请输入投诉内容", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
      },
      singcomplaintForm: {
        //投诉图片数组
        pics: [],
      },
      orderData: {}
    }
  },
  methods: {
    show({orderData}) {
      this.visible = true
      this.orderData = orderData
      this.complainForm.phone = this.orderData.bookerPhone;
    },
    // 投诉工单 上传成功
    handComplaintLeftSuccess(response) {
      this.singcomplaintForm.pics.push({
        url: response.data,
      });
    },
    // 投诉工单 删除
    beforeComplaintRemove(index) {
      this.singcomplaintForm.pics.map((item, ids) => {
        if (item.uid == index.uid) {
          this.singcomplaintForm.pics.splice(ids, 1);
        }
      });
    },
    // 投诉取消按钮
    complainResetForm(formName) {
      this.$refs[formName].resetFields();
      this.visible = false;
    },
    // 投诉确认按钮
    complainSubmitForm(formName) {
      this.complainForm.orderId = this.orderData.id;
      let arr = [];
      if (this.singcomplaintForm.pics.length) {
        this.singcomplaintForm.pics.map((item) => {
          arr.push(item.url);
        });
      }
      this.complainForm["extJson"] = JSON.stringify({ img: arr });

      this.$refs[formName].validate((valid) => {
        if (valid) {
          addWorkOrderComplaint(this.complainForm).then((res) => {
            if (res.data.code == 200) {
              this.$refs[formName].resetFields();
              this.visible = false;
              this.$confirm(
                `投诉成功！后台单号：${this.orderData.xmbzNo}`,
                "提示",
                {
                  showCancelButton: false,
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "success",
                }
              )
                .then(() => {
                  window.close();
                })
                .catch(() => {});
            }
          });
        } else {
          return false;
        }
      });
    },
    // 投诉-生成群内容
    onComplaintChannelChange(value) {
      if (value === 9) { // 生产群
        this.complainForm.complaintContent = prodComplaintTem
      }
    },
    //  共用选择多图片
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
  created() {
    getComplaintLevelList().then((res) => {
      // 投诉等级列表
      this.getComplaintLevelList = res.data.data;
    });
    getComplaintChannelList().then((res) => {
      // 投诉渠道列表
      this.getComplaintChannelList = res.data.data;
    });
  }
}
</script>

<style lang="scss" scoped></style>
